<template>
  <div>
    <page-banner v-if="showBanner && bannerPosition==='top'" ref="pageBanner" :banner-setting="bannerSetting" />
    <div>
      <table-filter
        ref="tableFilter"
        is-in-template
        :query="filter"
        :query-rows="queryRows"
        :enable-full-search="fullTextSearch"
        :search-type.sync="searchType"
        :search-text.sync="searchText"
        :grid-info="gridInfo"
        @search="handleSearch"
        @reset="handleSearch"
      />
      <div class="filter-wraper">
        <table-operate is-in-template :btns="toolbarBtns" :show-back="showBack">
          <template v-if="showBack" #back="{size}">
            <span class="btn-wraper">
              <el-button type="primary" :size="size" icon="el-icon-back" @click="goBack">返回</el-button>
            </span>
          </template>
        </table-operate>
      </div>
      <div class="left-container">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="待办" name="status0" />
          <el-tab-pane label="已办" name="status1" />
        </el-tabs>
      </div>
      <lb-table
        v-loading="listLoading"
        v-bind="tableAttr"
        :column="tableColumn"
        :data="tableData"
        :table-info="tableInfo"
        :grid-info="gridInfo"
        :personalization="personalization"
        :btns="tableBtns"
        :pagination="enablePaging"
        background
        border
        is-template
        fixed-heigth
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        :default-sort="defaultSort"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
        @sort-change="handleSortChange"
      />
      <page-banner v-if="showBanner && bannerPosition==='bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
    </div>
  </div>
</template>

<script>
import main from './mixins/main'
import tab from './mixins/tab'
import table from './mixins/table'
import filter from './mixins/filter'
import banner from './mixins/banner'
export default {
  name: 'Tem1150',
  mixins: [main, tab, filter, table, banner],
  data() {
    return {}
  },
  mounted: function() {
    this.activeTab = 'status0'
    this.$store.commit('page/SET_CURRENTTAB', this.activeTab)
    this.getList()
  },
  beforeDestroy() {
    this.$store.commit('page/SET_CURRENTTAB', '')
  },
  methods: {
    onActivated: function() {
      this.getList()
    },
    handleTabClick(tab, event) {
      const { name } = tab
      this.currentPage = 1
      this.$store.commit('page/SET_CURRENTTAB', name)
      this.emitTabclick({ tab })
      this.activeTab = name
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .form-operate{
  display: inline-block;
  margin-right: 10px;
}
::v-deep .el-tabs__item{
  font-size: 16px;
}
</style>
